<template>
  <div class="userBox">
    <div class="userName">
      <span>{{this.username}}</span>
      <i class="iconfont">&#xe8fd;</i>
    </div>
    <div class="msg">
      <i class="iconfont">&#xe605;</i>
    </div>
    <div class="creatStick" @click="handlePropShow">
      <i class="iconfont">&#xe6b2;</i>
      <span class="createBth">发帖</span>
    </div>
    <header-select 
      @close="handlePropClose" 
      v-show="propShow"
    ></header-select>
  </div>

</template>

<script>
import { mapState } from 'vuex';
import HeaderSelect from './HeaderSelect.vue';

export default {
  name: 'HeaderInfo',
  inject: ['reload'],
  components: {
    HeaderSelect
  },
  data () {
    return {
      propShow: false,
    }
  },
  methods: {
    handlePropShow () {
      this.propShow = true
    },
    handlePropClose () {
      this.propShow = false
    }
  },
  computed: {
    ...mapState(['username'])
  },
  watch: {
    $route (to, from ,next) {
      if (to.path !== from.path) {
        this.reload();
      }
    }
  }

}
</script>

<style lang="stylus" scoped>
  .userBox
    float: right
    margin-right: .1rem
    height: .9rem
    font-size: .24rem
    .userName,.msg,.creatStick
      float: left
    .userName
      float: left
      min-width: .6rem
      line-height: .9rem
      color: #333
      font-weight: bold
      cursor: pointer
      i
        font-size: .18rem
        color: #a9c7dd
        margin-left: -.05rem
      span:hover
        text-decoration: underline
    .msg
      height: .56rem
      line-height: .56rem
      text-align: center
      margin-top: .18rem
      margin-left: .26rem
      width: .66rem
      box-shadow: 0rem 0rem .04rem .03rem #3876a3
      border-radius: .04rem
      background: linear-gradient(to bottom, #63b1e8 , #4e96d5)
      cursor: pointer
      i
        color: #fff
        font-size: .34rem
    .creatStick
      height: .56rem
      line-height: .56rem
      text-align: center
      margin-top: .18rem
      margin-left: .26rem
      width: 1.3rem
      box-shadow: 0rem 0rem .04rem .03rem #3876a3
      border-radius: .04rem
      background: linear-gradient(to bottom, #63b1e8 , #2e96d5)
      color: #fff
      cursor: pointer
      i
        color: #fff
        font-size: .22rem 
    .creatStick:hover,.msg:hover
      background: linear-gradient(to bottom, #69b5ea , #579edc)
</style>